<template>
    <div class="side">
        <lay-menu :selected-key="selectedKey" @change-selected-Key="changeSelectedKey"
            @change-open-keys="changeOpenKeys" v-model:openKeys="openKeys2" :tree="true">
            <lay-menu-item :id="item.pathName.replace(/[\/]+/g, '')" v-for="item in   pathList  " :key="item.pathID">{{
            item.description }}</lay-menu-item>
        </lay-menu>
    </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const pathList = ref(JSON.parse(localStorage.getItem("userRole")))
const openKeys2 = ref(["home"])
const selectedKey = ref()
onMounted(() => {
    selectedKey.value = route.path.split("/")[1];
})
const changeSelectedKey = (val) => {
    selectedKey.value = val;
    router.push({ path: `/${val}` })
}

const changeOpenKeys = (val) => {
    openKeys2.value = val;
}

</script>
<style scoped lang="less">
.side {
    height: calc(100vh - 60px);
    background-color: #393D49;
    overflow-y: auto;
}
</style>